<template>
  <div>
     <Header></Header>
     <router-view></router-view>
     <Footer></Footer>
  </div>
</template>

<script>
import Header from './components/Header/index.vue'
import Footer from './components/Footer/index.vue'

export default {
  name: 'App',
  components: {
    Header,
    Footer
  },
  mounted() {
    /**
     * (1)由于根组件App.vue的mounted只会执行一次，因此放在这只请求一次大大提高了性能
     *    因此以后有哪里多次使用且结果一样的，看能不能只做一次，提高性能
     * (2)注意只有组件才有实例，才能用this,否则不能用比如放到main.js文件中
     * */ 
    this.$store.dispatch("categoryList");
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
